<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>登录</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="../css/denglu.css">
  <link rel="shortcut icon" href="../img/1.ico" />
  <link rel="stylesheet" href="../font/iconfont.css">
</head>

<body>
  <!-- 上边 -->
  <div class="top">
    <div class="top1">
      <a href="../html/shouye.html" title="淘宝网" class="long"><img src="../img/aaaa.jpg" alt=""></a>
      <a href="" class="top-right">
        <span class="iconfont icon-chufang"></span>
        <span>"登录页面"改进建议</span>
      </a>
      <p class="top2"><a href="">网站无障碍</a></p>
    </div>
  </div>

  <!-- 中间 -->
  <div class="box">
    <a href="https://mpage.taobao.com/hd/download.html?spm=a2107.1.0.0.3f2511d9mgR5Ut" target="_blank" class="ding"></a>
    <div class="box1">
      <span class="Img Img3">扫码登录更安全</span>
      <span class="Img Img2"><a href=""><img src="../img/ma.png" alt=""></a></span>
      <span class="Img"><img src="../img/yonghu.png" alt=""></span>
      <span class="Img Img1"><img src="../img/shuru.png" alt=""></span>
      
      <!-- 中间小块 -->
      <div class="box2">
        <!-- 登录小块 -->
        <div class="box3">
          <div>
            <span class="m">密码登录</span>
            <span class="m1">短信登录</span>
          </div>
          <div class="put">
            <input type="text" name="" id="unIpt" placeholder="会员名/邮箱/手机号" />
            <input type="password" name="" id="pwIpt" placeholder="请输入登录密码" />
            <input type="button" name="" id="btn" value="登录" />
          </div>
          <div class="wb">
            <p>
              <span><img src="../img/wei.png" alt=""></span><a href="">微博登录</a>
            </p>
            <p>
              <span><img src="../img/zhi.png" alt=""></span><a href="">支付宝登录</a>
            </p>
          </div>
          <div class="san">
            <p><a href="../html/zhuce.html">免费注册</a> </p>
            <p><a href="">忘记密码</a> </p>
            <p><a href="">忘记用户名</a> </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 下面 -->
  <div class="footer">
    <div class="footer-hd">
      <p>
        <a href="">阿里巴巴集团</a>
        <b>|</b>
        <a href="">阿里巴巴国际站</a>
        <b>|</b>
        <a href="">阿里巴巴中国站</a>
        <b>|</b>
        <a href="">全球速卖通</a>
        <b>|</b>
        <a href="">淘宝网</a>
        <b>|</b>
        <a href="">天猫</a>
        <b>|</b>
        <a href="">聚划算</a>
        <b>|</b>
        <a href="">一淘</a>
        <b>|</b>
        <a href="">阿里妈妈</a>
        <b>|</b>
        <a href="">飞猪</a>
        <b>|</b>
        <a href="">虾米</a>
        <b>|</b>
        <a href="">阿里云计算</a>
        <b>|</b>
        <a href="">云OS</a>
        <b>|</b>
        <a href="">万网</a>
        <b>|</b>
        <a href="">支付宝</a>
        <b>|</b>
        <a href="">来往</a>
      </p>
    </div>
    <div class="footer-bd">
      <p>
        <span>
          <a href="">关于淘宝</a>
        </span>
        <span>
          <a href="">合作伙伴</a>
        </span>
        <span>
          <a href="">营销中心</a>
        </span>
        <span>
          <a href="">廉政举报</a>
        </span>
        <span>
          <a href="">联系客服</a>
        </span>
        <span>
          <a href="">开放平台</a>
        </span>
        <span>
          <a href="">诚征英才</a>
        </span>
        <span>
          <a href="">联系我们</a>
        </span>
        <span>
          <a href="">网站地图</a>
        </span>
        <span>
          <a href="">隐私权政策</a>
        </span>
        <span>
          <a href="">法律声明</a>
        </span>
        <span>
          <a href="">知识产权</a>
        </span>
        <b>|</b>
        <em>© 2003-现在 Taobao.com 版权所有</em>
      </p>
      <p>
        <span>
          <a href="">增值电信业务经营许可证：浙B2-20080224</a>
        </span>
        <b>|</b>
        <span>
          <a href="">增值电信业务经营许可证（跨地区）： B2-20150210</a>
        </span>
        <b>|</b>
        <span>
          <a href="">浙网文（2019）1033-086号</a>
        </span>
        <b>|</b>
        <span>
          <a href="">浙江省网络食品销售第三方平台提供者备案：浙网食A33010001</a>
        </span>
      </p>
      <p>
        <span>互联网药品信息服务资格证书（浙）-经营性-2018-0010</span>
        <b>|</b>
        <span>短消息类服务接入代码使用证书：号【2016】00154-A01</span>
        <b>|</b>
        <span>信息网络传播视听许可证：1109364号</span>
        <b>|</b>
        <span>出版物网络交易平台服务经营备案号：新出发浙备字第002号</span>
      </p>
      <p>
        <span>
          <a href="">
            <span class="tb-footer-mod" style="
              background-position: -861px 0px;
              width: 20px;
              height: 20px;
            "></span> 浙公网安备 33010002000078号
          </a>
        </span>
        <b>|</b>
        <span>
          <a href="">浙B2-20080224-1</a>
        </span>
        <b>|</b>
        <span>广播电视节目制作经营许可证（浙）字第01012号</span>
        <b>|</b>
        <span>市场名称登记证：工商网市字3301004120号</span>
        <b>|</b>
        <span>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00004号</span>
      </p>
    </div>
      <div class="footer-ft">
        <a href=""><img src="../img/xia.png" alt="" /></a>
      </div>
    </div>


    <script>
      let m = document.querySelector('.m')
      let m1 = document.querySelector('.m1')
      m1.onclick = function () {
        m.style.borderBottom = 'transparent';
        this.style.borderBottom = '3px solid black';
      }
      m.onclick = function () {
        m1.style.borderBottom = 'transparent';
        this.style.borderBottom = '3px solid black';
      }
    
    
      // 1- 检测格式 失去焦点
      // 2- 点击登录按钮的时候  获取 用户名和密码。 发起登录请求
      let isUsername = false;
      let unIpt = document.querySelector("#unIpt");
      unIpt.onclick = function () {
        this.style.outlineColor = 'transparent';
      };
      unIpt.onblur = function () {
        let str = unIpt.value;
        let usernameReg = /^[a-zA-Z]\w{5,17}$/;
        if (usernameReg.test(str)) {
          this.nextElementSibling.innerHTML = "正确";
          isUsername = true;
        } else {
          this.nextElementSibling.innerHTML = "不正确";
          isUsername = false;
        }
      };
    
      let isPW = false;
      let pwIpt = document.querySelector("#pwIpt");
      pwIpt.onclick = function () {
        this.style.outlineColor = 'transparent';
      };
      pwIpt.onblur = function () {
        let str = pwIpt.value;
        let usernameReg = /^\S{3,18}$/;
        if (usernameReg.test(str)) {
          this.nextElementSibling.innerHTML = "正确";
          isPW = true;
        } else {
          this.nextElementSibling.innerHTML = "不正确";
          isPW = false;
        }
      };
    
      let btn = document.querySelector("#btn");
      btn.onclick = function () {
        if (isUsername && isPW) {
          //发登录请求
          let username = unIpt.value;
          let password = pwIpt.value;
          let loginAPI = "http://jx.xuzhixiang.top/ap/api/login.php";
          axios
            .get(loginAPI, {
              params: {
                username: username,
                password
                  }
            })
            .then((r) => {
              console.log(r.data);
              if (r.data.code == 1) {
                console.log("登录成了");
                alert(r.data.msg);
                // ***** {code: ,msg:  ,data :{id,token}}
                console.log(r.data);
                location.href = "../html/shouye.html";
                // id  发布的
                //username
                // token (登录成功以后 服务器给了 令牌 )
    
                localStorage.setItem("uid", r.data.data.id);
                localStorage.setItem("token", r.data.data.token);
                localStorage.setItem("username", r.data.data.username);
              }
            });
        }
      };
    </script>
    </body>
    </html>

